<div class="bf-tenant">
  <!--确认弹窗-->
  <p-confirmDialog acceptLabel="确认" rejectLabel="取消"></p-confirmDialog>
  <!--消息提示-->
  <p-messages  [closable]="true" [style]="{'position':'fixed','left': '10vw', 'top': '0','margin-top': '0','width': '100vw','z-index':'9999'}"></p-messages>
  <!--顶部按钮-->
  <div class="bf-tenant-header">
    <div class=" ui-g-12">
      <div class="ui-g-1 bf-tenant-header-btn bf-tenant-header-btn-add" (click)="tenantAddClick()" [hidden]="btnHiden[0].hidden">
        <img class="bf-tenant-header-img" src="assets/images/ic_add.png" alt="">
        <span>增 加</span>
      </div>
      <div class="ui-g-1 bf-tenant-header-btn bf-tenant-header-btn-modify" (click)="tenantModifyClick()" [hidden]="btnHiden[1].hidden">
        <img class="bf-tenant-header-img-modify" src="assets/images/ic_modify.png" alt="">
        <span>修 改</span>
      </div>
      <div class="ui-g-1 bf-tenant-header-btn bf-tenant-header-btn-Logout" (click)="tenantLogoutClick()" [hidden]="btnHiden[2].hidden">
        <img class="bf-tenant-header-img" src="assets/images/ic_delete.png" alt="">
        <span>注 销</span>
      </div>
      <div class="ui-g-1 bf-tenant-header-btn bf-tenant-header-btn-delete" (click)="tenantDeleteClick()" [hidden]="btnHiden[3].hidden">
        <img class="bf-tenant-header-img" src="assets/images/ic_delete.png" alt="">
        <span>删 除</span>
      </div>
      <div class="ui-g-1 bf-tenant-header-btn bf-owner-header-btn-import" (click)="AddMoreClick()" [hidden]="btnHiden[4].hidden">
        <img class="bf-tenant-header-img" src="assets/images/ic_add.png" alt="">
        <span>导 入</span>
      </div>
      <div class="ui-g-1 bf-tenant-header-btn bf-owner-header-btn-import" (click)="importOutFileClick()" [hidden]="btnHiden[5].hidden">
        <img class="bf-tenant-header-img" src="assets/images/ic_add.png" alt="">
        <span>导  出</span>
      </div>
    </div>
    <!--//搜索-->
    <div class="ui-inputgroup bf-tenant-header-search" *ngIf="!btnHiden[6].hidden">
      <p-dropdown [options]="SearchTypeOption"   scrollHeight="100px" placeholder="请选搜索方式..." [style]="{'width': '8vw','margin-right': '1vw'}" [(ngModel)]="searchType"></p-dropdown>
      <input type="text" pInputText placeholder="请输入需要搜索的值"  [(ngModel)]="inputSearchData">
      <button id="disabled-btn" class="bf-tenant-header-btn-search" type="button"  (click)="tenantSearchClick()"  label="搜索">搜索</button>
    </div>
  </div>
  <!--表格-->
  <div class="bf-tenant-table">
    <rbi-check-table-btn
      [option]="tenantTableOption"
      [select]="tenantSelect"
      (selectData)="selectData($event)"
      (detail)="tenantDetailClick($event)">
    </rbi-check-table-btn>
  </div>
  <!--详情弹窗-->
  <p-dialog header="详细信息" [(visible)]="tenantDetailDialog" [width]="1100" class="tenant-detail">
    <!--Content-->
    <div class="ui-g ui-fluid" [ngStyle]="{'line-height':'3vh','text-align':'center'}">
      <div class="ui-g-6" *ngFor="let item of tenantMoreDetail">
        <div class="ui-g-4" style="text-align: right">
          <label>{{item.header}}：</label>
        </div>
        <div class="ui-g-8">
          <span >{{item.value}}</span>
        </div>
      </div>
      <p-scrollPanel [style]="{width:'100%',height: '25vh'}" styleClass="custombar">
        <p-table [columns]="tenantRoomCodeDetailTitle" [value]="roomList"   [style]="{'width': '100%'}">
          <ng-template pTemplate="header" let-columns>
            <tr >
              <th *ngFor="let col of columns" [ngStyle]="{'height': '5vh'}">
                {{col.header}}
              </th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
            <tr [pSelectableRow]="rowData" [ngStyle]="{'background' : '#FFFFFF', 'color':'#000'}">
              <td  *ngFor="let col of columns" [ngStyle]="{'overflow-x': 'auto'}">
                {{rowData[col.field]}}
              </td>
            </tr>
          </ng-template>
        </p-table>
      </p-scrollPanel>
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix" style="text-align: center">
        <!--<button class="bf-owner-dialog-Btn bf-owner-dialog-Btn-sure" (click)="ownerModifySureClick()">确认</button>-->
        <button class="bf-tenant-dialog-Btn bf-tenant-dialog-Btn-false"  (click)="tenantDetailDialog=false">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <!--租客添加-->
  <p-dialog header="租客添加" [(visible)]="tenantDialog" [width]="900">
    <!--Content-->
    <div class="ui-g ui-fluid" [ngStyle]="{'line-height':'4vh'}">
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: keyTenantInfoList[0]}">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>客户名称：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText placeholder="请输入客户名称..." [(ngModel)]="tenantinfo.surname" (blur)="changeInput(tenantinfo.surname, 0)">
          <span [hidden]="!this.keyTenantInfoList[0]">此字段为必填字段</span>
        </div>
      </div>

      <div class="ui-g-6" [ngClass]="{InputKeyFilter: keyTenantInfoList[1]}">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>客户电话：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText placeholder="请输入客户电话..." [(ngModel)]="tenantinfo.mobilePhone" (blur)="changeInput(tenantinfo.mobilePhone, 1)">
          <p-message  severity="error" text="请输入符合规定的11位手机号(13/17/14/15/18开头的格式)" [hidden]="(tenantinfo.mobilePhone === undefined || tenantinfo.mobilePhone === '')? !toolSrv.verifyPhone.test(tenantinfo.mobilePhone): toolSrv.verifyPhone.test(tenantinfo.mobilePhone)"></p-message>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: keyTenantInfoList[2]}">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>身份证号：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText placeholder="请输入身份证号..." [(ngModel)]="tenantinfo.idNumber" (blur)="changeInput(tenantinfo.idNumber, 2)">
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{dropdownKeyFilter: keyTenantInfoList[3]}">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>是否正常缴费：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'3vh'}">
          <p-dropdown [options]="normalChargeOption"  scrollHeight="100px" placeholder="请选择注销状态..."  [(ngModel)]="tenantinfo.normalPaymentStatus" (onChange)="changeInput(tenantinfo.normalPaymentStatus, 3)"></p-dropdown>
          <span [hidden]="!this.keyTenantInfoList[3]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: keyTenantInfoList[4]}">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>租房开始时间：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="tenantinfo.startTime" placeholder="请选择租房开始日期..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"   yearRange="1900:2150" [locale]="esDate" (onBlur)="changeInput(tenantinfo.startTime, 4)"></p-calendar>
          <span [hidden]="!this.keyTenantInfoList[4]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: keyTenantInfoList[5]}">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>租房结束时间：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="tenantinfo.endTime" placeholder="请选择租房结束日期..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"   yearRange="1900:2150" [locale]="esDate" (onBlur)="changeInput(tenantinfo.endTime, 5)"></p-calendar>
          <span [hidden]="!this.keyTenantInfoList[5]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >备注：</label>
        </div>
        <div class="ui-g-8">
          <textarea  type="text" pInputText placeholder="备注..." [(ngModel)]="tenantinfo.remarks"></textarea>
        </div>
      </div>
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix" style="text-align: center">
        <button class="bf-tenant-dialog-Btn bf-tenant-dialog-Btn-sure" (click)="tenantInfoAddClick()">确认</button>
        <button class="bf-tenant-dialog-Btn bf-tenant-dialog-Btn-false" (click)="tenantDialog=false;clearData()">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <!--租客修改-->
  <p-dialog header="租客修改" [(visible)]="tenantModifyDialog" [width]="900">
    <!--Content-->
    <div class="ui-g ui-fluid" [ngStyle]="{'line-height':'4vh'}">
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: keyTenantInfoList[0]}">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>客户名称：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText [placeholder]="tenantinfo.surname" [(ngModel)]="tenantinfo.surname" (blur)="changeInput(tenantinfo.surname, 0)">
          <span [hidden]="!this.keyTenantInfoList[0]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: keyTenantInfoList[1]}">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>客户电话：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText [placeholder]="tenantinfo.mobilePhone" [(ngModel)]="tenantinfo.mobilePhone" (blur)="changeInput(tenantinfo.mobilePhone, 1)">
          <p-message  severity="error" text="请输入符合规定的11位手机号(13/17/14/15/18开头的格式)" [hidden]="(tenantinfo.mobilePhone === undefined || tenantinfo.mobilePhone === '')? !toolSrv.verifyPhone.test(tenantinfo.mobilePhone): toolSrv.verifyPhone.test(tenantinfo.mobilePhone)"></p-message>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: keyTenantInfoList[2]}">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>身份证号：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input  type="text" pInputText [placeholder]="tenantinfo.idNumber" [(ngModel)]="tenantinfo.idNumber" (blur)="changeInput(tenantinfo.idNumber, 2)">
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{dropdownKeyFilter: keyTenantInfoList[3]}">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>是否正常缴费：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <p-dropdown [options]="normalChargeOption"  scrollHeight="100px" [placeholder]="tenantinfo.normalPaymentStatus"  [(ngModel)]="tenantinfo.normalPaymentStatus" (onChange)="changeInput(tenantinfo.normalPaymentStatus, 3)"></p-dropdown>
          <span [hidden]="!this.keyTenantInfoList[3]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: keyTenantInfoList[4]}">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>租房开始时间：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="tenantinfo.startTime" [placeholder]="tenantinfo.startTime" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"   yearRange="1900:2150" [locale]="esDate" (onBlur)="changeInput(tenantinfo.startTime, 4)"></p-calendar>
          <span [hidden]="!this.keyTenantInfoList[3]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: keyTenantInfoList[5]}">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>租房结束时间 ：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="tenantinfo.endTime" [placeholder]="tenantinfo.endTime" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"   yearRange="1900:2150" [locale]="esDate" (onBlur)="changeInput(tenantinfo.endTime, 5)"></p-calendar>
          <span [hidden]="!this.keyTenantInfoList[5]">此字段为必填字段</span>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4">
          <label >备注：</label>
        </div>
        <div class="ui-g-8">
          <textarea  type="text" pInputText [placeholder]="tenantinfo.remarks" [(ngModel)]="tenantinfo.remarks"></textarea>
        </div>
      </div>
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix" style="text-align: center">
        <button class="bf-tenant-dialog-Btn bf-tenant-dialog-Btn-sure" (click)="owerInfoModifyClick()">确认</button>
        <button class="bf-tenant-dialog-Btn bf-tenant-dialog-Btn-false" (click)="tenantModifyDialog=false;clearData()">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <!--租客信息导出-->
  <p-dialog header="租客信息导出" [(visible)]="downtenantInfoDialog" [width]="600" >
    <div class="ui-g ui-fluid" [ngStyle]="{'line-height':'4vh'}">
      <div class="ui-g-8">
        <div class="ui-g-4">
          <label ><span style="color: red">*</span>客户身份：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <p-dropdown [options]="identityOption"  scrollHeight="100px" placeholder="请选择客户身份..."  [(ngModel)]="downLoadIndentity"></p-dropdown>
        </div>
      </div>
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix">
        <button class="bf-tenant-dialog-Btn bf-tenant-dialog-Btn-sure" (click)="downloadFileOwnerInfo()">确认</button>
        <button class="bf-tenant-dialog-Btn bf-tenant-dialog-Btn-false" (click)="downtenantInfoDialog=false;">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <!--文件上传-->
  <rbi-file-pop [UploadFileOption]="UploadFileOption" (event)="tenantUploadSureClick($event)"></rbi-file-pop>
  <rbi-paging [option]="option" (pageClick)="nowpageEventHandle($event)"></rbi-paging>
  <rbi-upload-file-record [uploadRecordOption]="uploadRecordOption"></rbi-upload-file-record>
</div>
